<template>
  <div class='home-container fadeIn'>
    <button type="button" class="btn-login" @click='goLogin'>登录</button>
    <button type="button" class="btn-login" @click='goRegister'>注册</button>

      <el-dialog
        :append-to-body="true"
        :visible.sync="dialogLogin"
        :show-close="false"
        >
        <div class="contentLogin">
        <div class="hometitle">登录</div>
        <div class="homeDefault">
          <el-form :model='form' :rules='rules' status-icon ref='form' label-width='100px' size="medium">
            <div class='item-box'>
              <el-form-item prop='username'>
                <el-input type='text' v-model='form.username' placeholder='请输入账户' auto-complete='off' @keyup.enter.native="loginSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item prop='password'>
                <el-input type='password' v-model='form.password' placeholder='请输入密码' auto-complete='off' @keyup.enter.native="loginSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item class="text-right">
                  <a @click='goPassword'>忘记密码？</a>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item>
                <el-button class='submit' @click='loginSubmit'>登录</el-button>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item>
                <div class='tip-register'>
                  <a @click='goRegister'>立即注册</a>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
        </div>
      </el-dialog>
      <el-dialog
        :append-to-body="true"
        :visible.sync="dialogPassword"
        :show-close="false"
        >
        <div class="contentLogin">
        <div class="title">找回密码</div>
        <div class="homeDefault">
          <el-form :model='formPassword' :rules='rulesPassword' ref="formPassword" status-icon  label-width='100px' size="medium">
            <div class='item-box'>
              <el-form-item prop='username' >
                <el-input type='text' :disabled='tgphone' v-model='formPassword.phone' placeholder='请输入手机号' auto-complete='off' @keyup.enter.native="passwordSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item prop='code' class="passwordCode">
                <el-input  type='text' :disabled='tgphone' v-model='formPassword.code' placeholder='请输入验证码' auto-complete='off' @keyup.enter.native="passwordSubmit"/>
                <el-button class="item-code">获取验证码</el-button>
              </el-form-item>
            </div>
            <div class='item-box' v-show='findPassword'>
              <el-form-item prop="password">
                <el-input type="password" v-model="formPassword.password" placeholder='请输入新密码' @keyup.enter.native="loginSubmit" auto-complete="off"></el-input>
              </el-form-item>
            </div>
            <div class='item-box' v-show='findPassword'>
              <el-form-item prop="newPassword">
                <el-input type="password" v-model="formPassword.newPassword" placeholder='请在输入密码' @keyup.enter.native="loginSubmit" auto-complete="off"></el-input>
              </el-form-item>
            </div>

            <div class='item-box'>
              <el-form-item>
                <el-button class='submit' @click='passwordSubmit'>修改密码</el-button>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item>
                <div class='tip-register'>
                  <a @click='goLogin'>想起来了，马上登录</a>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
        </div>
      </el-dialog>
      <el-dialog custom-class="register-dialog"
        :append-to-body="true"
        :visible.sync="dialogRegister"
        :show-close="false"
        >
        <div class="contentLogin contentheight">
        <div class="title">注册</div>
        <div class="homeDefault">
          <el-form :model='formRegister' :rules='rulesRegister' status-icon ref='form' label-width='100px' size="medium">
            <div class='item-box item-box-register'>
              <el-form-item prop='username'>
                <el-input type='text' v-model='formRegister.username' placeholder='请输入帐号' auto-complete='off' @keyup.enter.native="registerSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box item-box-register'>
              <el-form-item prop='password'>
                <el-input type='password' v-model='formRegister.password' placeholder='请输入密码' auto-complete='off' @keyup.enter.native="registerSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box item-box-register'>
              <el-form-item prop='phone'>
                <el-input type='text' v-model='formRegister.phone' placeholder='请输入电话' auto-complete='off' @keyup.enter.native="registerSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box item-box-register'>
              <el-form-item prop='qq'>
                <el-input type='text' v-model='formRegister.qq' placeholder='请输入QQ' auto-complete='off' @keyup.enter.native="registerSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box item-box-register'>
              <el-form-item prop='email'>
                <el-input type='email' v-model='formRegister.email' placeholder='请输入Email' auto-complete='off' @keyup.enter.native="registerSubmit"/>
              </el-form-item>
            </div>
            <div class='item-box item-register'>
              <el-form-item>
                <el-checkbox v-model='formRegister.readed'>已阅读并同意</el-checkbox>
                <span class='clause'><router-link target = _blank to='/user'>《用户协议》</router-link></span>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item>
                <el-button class='submit' @click='registerSubmit'>注册</el-button>
              </el-form-item>
            </div>
            <div class='item-box'>
              <el-form-item>
                <div class='tip-login'>
                  <a @click='goLogin'>已有帐号，马上登录</a>
                </div>
              </el-form-item>
            </div>
          </el-form>
        </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import { isPhone, isEmail, queryString } from '@/utils';

export default {
  name: 'Home',
  data() {
    const validatePhone = (rule, value, callback) => {
      const bool = isPhone(value);

      if (!bool) {
        callback(new Error('请输入正确的电话号码'));
      } else {
        callback();
      }
    };
    const validateEmail = (rule, value, callback) => {
      const bool = isEmail(value);

      if (!bool) {
        callback(new Error('请输入正确电子邮箱'));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.formPassword.password !== '') {
          this.$refs.formPassword.validateField('newPassword');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.formPassword.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogPassword: false,
      dialogLogin: false,
      dialogRegister: false,
      isSubmit: false,
      findPassword: false,
      tgphone: false,
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入帐号', trigger: 'blur' },
          { min: 6, max: 12, message: '帐号长度在6到12个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在6到12个字符', trigger: 'blur' },
        ],
      },
      formPassword: {
        phone: '',
        code: '',
      },
      rulesPassword: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在6到12个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在6到12个字符', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' },
        ],
      },
      formRegister: {
        phone: '',
        qq: '',
        email: '',
        username: '',
        password: '',
        readed: false,
      },
      rulesRegister: {
        username: [
          { required: true, message: '请输入帐号', trigger: 'blur' },
          { min: 6, max: 12, message: '帐号长度在6到12个字符', trigger: 'blur' },
        ],
        qq: [
          { required: true, message: '请输入QQ', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入email', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入帐号', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在6到12个字符', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
  },
  mounted() {
  },
  components: {
  },
  methods: {
    ...mapActions('register', [
      'usersRegister',
      'usersLogin',
    ]),
    changeCaptcha() {
      this.captchaUrl = `/edges/captcha?type=1&${Date.now()}`;
    },
    // 跳转注册
    goRegister() {
      this.dialogLogin = false;
      this.dialogRegister = true;
    },
    registerSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.formRegister.readed) {
            this.$message.warning('请勾选，我接收优小招用户协议和隐私政策！');
            return false;
          }
          // 用户注册  baseURL
          return this.usersRegister(queryString({
            username: this.formRegister.username,
            password: this.$md5(this.formRegister.password).toUpperCase(),
            qq: this.formRegister.qq,
            phone: this.formRegister.phone,
            email: this.formRegister.email,
          }))
          .then((res) => {
            setTimeout(() => {
              this.isSubmit = false;
            }, 5000);

            if (!res) {
              // this.$message.warning(res.data.message);
              return;
            }
            if (res.data.userId) {
              this.$setLS(res.data);
              this.$router.push({ path: '/main' });
            }
          });
        }
        return false;
      });
    },
    // 登录弹窗
    goLogin() {
      this.dialogLogin = true;
      this.dialogRegister = false;
      this.dialogPassword = false;
    },
    // 登录操作
    loginSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid && !this.isSubmit) {
          return this.usersLogin(queryString({
            username: this.form.username,
            password: this.$md5(this.form.password).toUpperCase(),
          }))
          .then((res) => {
            setTimeout(() => {
              this.isSubmit = false;
            }, 5000);

            if (!res.data.userId) {
              this.$message.warning('帐号或者密码错误！');
              return;
            }
            if (res.data.userId) {
              this.$setLS(res.data);
              this.$router.push({ path: '/main' });
            }
          });
        }
        return false;
      });
    },
    goPassword() {
      this.dialogLogin = false;
      this.dialogRegister = false;
      this.dialogPassword = true;
    },
    passwordSubmit() {
      this.tgphone = !this.tgphone;
      this.findPassword = !this.findPassword;
    },
  },
};
</script>
<style lang='scss' src='@/scss/pages/home.scss' />
